<template>
  <view class="addr-page">
    <view class="hero">
      <view class="hero-title">地址管理</view>
      <view class="hero-sub">常用收货地址，便捷管理</view>
    </view>

    <scroll-view
      class="list"
      scroll-y
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 空状态 -->
      <uv-empty v-if="!loading && list.length===0" mode="list" icon="https://cdn.uviewui.com/uview/empty/list.png" text="暂无地址" />

      <!-- 加载中的简易骨架 -->
      <view v-if="loading && list.length===0" class="sk">
        <view v-for="n in 3" :key="n" class="sk-item" />
      </view>

      <!-- 地址项 -->
      <uv-swipe-action :disabled="loading">
        <uv-swipe-action-item
          v-for="it in list"
          :key="it.id"
          :name="it.id"
          :options="swipeOptions"
          @click="onSwipeClick"
        >
          <view class="item" @tap="goEdit(it)">
            <view class="row1">
              <view class="left">
                <text class="name">{{ it.name }}</text>
                <text class="phone">{{ it.phone }}</text>
                <uv-tags v-if="it.is_default" text="默认" type="primary" size="mini" plain custom-style="margin-left: 8rpx;" />
              </view>
            </view>
            <view class="row2">{{ it.province }}{{ it.city }}{{ it.district }} {{ it.detail }}</view>
            <view class="row3" @tap.stop>
              <uv-button size="small" type="primary" :plain="!it.is_default" @tap="setDefault(it)">
                {{ it.is_default ? '默认地址' : '设为默认' }}
              </uv-button>
            </view>
          </view>
        </uv-swipe-action-item>
      </uv-swipe-action>

      <view class="pad" />
    </scroll-view>

    <!-- 底部新增地址按钮 -->
    <view class="footer">
      <uv-button type="primary" shape="circle" @tap="goAdd">新增地址</uv-button>
    </view>
  </view>
</template>

<script setup>
// 中文注释：地址管理列表（uv-ui）
import { ref, getCurrentInstance, onMounted } from 'vue'
import { addressApi } from '@/api/index.js'

const { proxy } = getCurrentInstance()

const list = ref([])
const loading = ref(false)
const refreshing = ref(false)

const swipeOptions = [
  { text: '删除', style: { backgroundColor: '#ff4d4f', color: '#fff' }, key: 'delete' }
]

const fetchList = async () => {
  loading.value = true
  try {
    const data = await addressApi.getAddressList()
    list.value = Array.isArray(data?.list) ? data.list : []
  } catch (e) {
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
    if (refreshing.value) refreshing.value = false
  }
}

const onRefresh = () => {
  if (refreshing.value) return
  refreshing.value = true
  fetchList()
}

const onSwipeClick = async ({ name, index, option }) => {
  // 只有一个按钮：删除
  if (option?.key === 'delete') {
    delById(name)
  }
}

const delById = (id) => {
  uni.showModal({
    title: '提示',
    content: '确定删除该地址吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await addressApi.deleteAddress(id)
          uni.showToast({ title: '已删除', icon: 'none' })
          fetchList()
        } catch (e) {
          uni.showToast({ title: '删除失败', icon: 'none' })
        }
      }
    }
  })
}

const setDefault = async (item) => {
  if (item.is_default) return
  try {
    await addressApi.setDefaultAddress(item.id)
    uni.showToast({ title: '已设为默认', icon: 'none' })
    fetchList()
  } catch (e) {
    uni.showToast({ title: '设置失败', icon: 'none' })
  }
}

const goAdd = () => {
  // 预留新增地址页路由（请在有编辑页后替换实际地址）
  proxy?.$navigateTo?.('/pages/address/edit')
}

const goEdit = (item) => {
  // 预留编辑地址页路由及参数
  proxy?.$navigateTo?.(`/pages/address/edit?id=${item.id}`)
}

onMounted(fetchList)
</script>

<style scoped lang="scss">
.addr-page { min-height: 100vh; background: $uni-bg-color-grey; }
.hero { padding: 24rpx; }
.hero-title { font-size: 36rpx; font-weight: 700; color: #1f2d3d; }
.hero-sub { font-size: 24rpx; color: #6b7c93; margin-top: 6rpx; }

.list { height: calc(100vh - 200rpx); padding: 0 16rpx; box-sizing: border-box; }
.sk { padding: 0 8rpx; }
.sk-item { height: 140rpx; background: #fff; border-radius: 16rpx; margin: 16rpx 8rpx; box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06); }

.item { background: #fff; border-radius: 16rpx; padding: 22rpx; margin: 16rpx 8rpx; box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06); }
.row1 { display: flex; justify-content: space-between; align-items: center; }
.left { display: flex; align-items: center; }
.name { font-size: 30rpx; color: #222; font-weight: 600; }
.phone { font-size: 28rpx; color: #555; margin-left: 16rpx; }
.row2 { margin-top: 8rpx; font-size: 26rpx; color: #666; }
.row3 { margin-top: 14rpx; padding-top: 14rpx; display: flex; justify-content: flex-end; border-top: 1rpx solid $uni-border-color; }

.footer { position: fixed; left: 0; right: 0; bottom: env(safe-area-inset-bottom); bottom: 0; background: #fff; padding: 16rpx; box-shadow: 0 -8rpx 24rpx rgba(0,0,0,0.06); }
.pad { height: 140rpx; }
</style>
